<template>
	<div>
		<div class="publicpageview">
			<div class="publicformview">
				<el-form :inline="true" :model="listQuery" size="mini" ref="searchForm">
					<el-row :gutter="20">
						<el-col :span="6">
							<el-form-item label="租赁合同出厂编号开始：" prop="noStart">
								<el-input v-model="listQuery.noStart"></el-input>
							</el-form-item>
						</el-col>
						<el-col :span="6">
							<el-form-item label="租赁合同出厂编号截至：" prop="noEnd">
								<el-input v-model="listQuery.noEnd"></el-input>
							</el-form-item>
						</el-col>
						
						<el-col :span="4">
							<el-form-item label="住非：" prop="type">
								<el-select v-model="listQuery.type">
									<el-option label="住宅" :value="'住宅'" key="0"></el-option>
									<el-option label="非住宅直管公产" :value="'非住宅直管公产'" key="1"></el-option>
									<el-option label="非住宅国有自管产" :value="'非住宅国有自管产'" key="2"></el-option>
									<el-option label="置换贷款" :value="'置换贷款'" key="3"></el-option>
									<el-option label="非住宅托管" :value="'非住宅托管'" key="4"></el-option>
								</el-select>
							</el-form-item>
						</el-col>
						<el-col :span="4">
							<el-form-item label="状态：" prop="status">
								<el-select v-model="listQuery.status">
									<el-option label="待审核" :value="'待审核'" key="0"></el-option>
									<el-option label="市公司已发放" :value="'市公司已发放'" key="1"></el-option>
									<el-option label="市房管中心已发放" :value="'市房管中心已发放'" key="2"></el-option>
									<el-option label="正常打印" :value="'正常打印'" key="3"></el-option>
									<el-option label="打印报废" :value="'打印报废'" key="4"></el-option>
									<el-option label="退回审核通过" :value="'退回审核通过'" key="5"></el-option>
									<el-option label="申请退回" :value="'申请退回'" key="6"></el-option>
									<el-option label="已登报申明作废" :value="'已登报申明作废'" key="7"></el-option>
								</el-select>
							</el-form-item>
						</el-col>
						<el-col :span="6">
							<el-form-item label="发放日期：" prop="createTimeStart">
								<el-date-picker v-model="listQuery.createTimeStart"
									type="date" placeholder="年/月/日">
								</el-date-picker>
							</el-form-item>
						</el-col>
						
						<el-col :span="6">
							<el-form-item label="报废日期：" prop="baoFeiDateStart">
								<el-date-picker v-model="listQuery.baoFeiDateStart"
									type="date" placeholder="年/月/日">
								</el-date-picker>
							</el-form-item>
						</el-col>
						<el-col :span="4">
							<div>
								<el-button size="mini" type="primary" @click="listContractRecorde">查询</el-button>
								<el-button size="mini" @click="
		                pageNum = 1;
		                resetForm('searchForm');
		              ">重置</el-button>
							</div>
						</el-col>
					</el-row>
				</el-form>
			</div>

			<div class="publitableview">
				<!-- <el-button type="primary" size="mini" @click="gotoDaYin"
		      >合同文本打印</el-button
		    > -->

				<el-table :data="list" border fit highlight-current-row size="mini" id="printMe">
					<el-table-column align="center" label="合同申请id" prop="contractId">
					</el-table-column>

					<el-table-column align="center" label="发放日期" prop="createTime">
					</el-table-column>
					<el-table-column align="center" label="报废日期" prop="baofeiDate">
					</el-table-column>

<!-- 
					<el-table-column align="center" label="申请数量" prop="counts">
					</el-table-column> -->
					<el-table-column align="center" label="租赁合同性质" prop="type">
					</el-table-column>
					<el-table-column align="center" label="状态" prop="status">
					</el-table-column>

					<!-- <el-table-column align="center" label="审核人	" prop="persional">
					</el-table-column> -->

					<el-table-column align="center" label="审核时间" prop="oprateDate">
					</el-table-column>

					<el-table-column align="center" label="合同出厂编号（起）" prop="createNo">
					</el-table-column>
				<!-- 	<el-table-column align="center" label="合同出厂编号（止）" prop="noEnd">
					</el-table-column>
					<el-table-column align="center" label="备注" prop="note">
					</el-table-column> -->
				

					<el-table-column align="center" label="操作" width="260">
						<template slot-scope="scope">
							<el-button v-if="scope.row.isBack!=1" type="text" size="mini" @click="handleDelete1(scope.row.id)">退回申请</el-button>
							<el-button v-if="scope.row.isBaofei!=1" type="text" size="mini" @click="handleDelete2(scope.row.id)">报废</el-button>
							<el-button v-if="scope.row.isBaofeiStatement!=1" type="text" size="mini" @click="handleDelete3(scope.row.id)">登报声明作废</el-button>
						</template>
					</el-table-column>
				</el-table>

				<div class="publicpaginationview">
					<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
						:current-page="listQuery.pageNum" background :page-sizes="[10, 20, 50, 100]" :page-size="listQuery.pageSize"
						layout="total, sizes, prev, pager, next, jumper" :total="total" small></el-pagination>
				</div>
			</div>

		</div>
		<!-- <button v-print="printObj">打印局部区域</button> -->
		<!-- <div id="loading" v-show="printLoading"></div> -->
	</div>
</template>

<script>
import dayjs from 'dayjs'
	import {
		listContract,
		createContract,
		submitContract,
		faFangContract,
		deleteContractById,
		authContract,
		updateContract,
		listContractRecorde,
		setBack,
		setBaofeiStatement,
		setBaoFei
	} from "@/api/management";
	import {
		Message
	} from "element-ui";
	import moment from "moment";

	export default {
		name: "AccommodationManagementIndex",

		data() {
			return {
				listQuery: {
					pageNum: 1,
					pageSize: 10,
					noEnd: "",
					noStart: "",
					status: '',
					type: '',
					baoFeiDateStart:'',
					createTimeStartEnd:''
				},
				total: 0,
				list: [],
				listLoading: false,
				dialogVisible: false,
				isAdd: "add",
				printLoading: true,
				printObj: {
					id: "printMe",
					popTitle: '打印预览',
					extraCss: "https://cdn.bootcdn.net/ajax/libs/animate.css/4.1.1/animate.compat.css",
					beforeOpenCallback(vue) {
						console.log('打开之前')
					},
					openCallback(vue) {
						console.log('执行了打印')
					},
					closeCallback(vue) {
						console.log('关闭了打印工具')
					}
				}
			};
		},

		computed: {},

		mounted() {
			this.listQuery.districtName = localStorage.getItem('userDname')
			this.listQuery.houseAdminName = localStorage.getItem('userHouseAdminName')
			this.listContractRecorde();
		},

		methods: {
			
			handleSizeChange(val) {
				this.listQuery.pageNum = 1;
				this.listQuery.pageSize = val;
				this.listContractRecorde();
			},
			handleCurrentChange(val) {
				this.listQuery.pageNum = val;
				this.listContractRecorde();
			},
			listContractRecorde() {
				this.listQuery.createTimeStart = this.listQuery.createTimeStart
				  ? dayjs(this.listQuery.createTimeStart).format('YYYY-MM-DD HH:mm:ss')
				  : ''
				this.listQuery.baoFeiDateStart = this.listQuery.baoFeiDateStart
				  ? dayjs(this.listQuery.baoFeiDateStart).format('YYYY-MM-DD HH:mm:ss')
				  : ''
				listContractRecorde(this.listQuery).then((response) => {
					this.total = response.data.total;
					this.list = response.data.list;
				});
			},

			resetForm(val) {
				this.listQuery.pageNum = 1,
				this.listQuery.pageSize = 10,
				this.listQuery.noEnd = "",
				this.listQuery.noStart = "",
				this.listQuery.status = '',
				this.listQuery.type = '',
				this.listQuery.baoFeiDateStart ='',
				this.listQuery.createTimeStartEnd =''
			},

			handleAddUser(type) {
				this.isAdd = "add";
				this.dialogVisible = true;
			},
			lookminxi(){
				this.$router.push('hetongwenbenminxi')
			},
			gotoDaYin() {
				this.$router.push({
					path: 'wenbendaying'
				})
			},
			handleClose() {
				this.resetForm("dataForm");
				this.dialogVisible = false;
			},

			handleUpdate(currentData, type) {
				this.isAdd = type;
				//   一定要在打开弹窗前 再赋值 不然resetFiles没用
				this.dialogVisible = true;
				this.$nextTick(() => {
					this.listQuery = {
						...currentData
					};
				});
			},

			handleTijiao(id) {
				this.$confirm("请确认是否提交当前文本合同", "提交提示", {
						confirmButtonText: "保 存",
						cancelButtonText: "取 消",
						type: "warning",
					})
					.then(() => {
						submitContract(id).then((res) => {
							Message({
								message: res.message || "操作成功",
								type: "success",
								duration: 3 * 1000,
							});
							this.listContractRecorde();
						});
					})
					.catch(() => {});
			},

			handleDelete1(id) {
				this.$confirm("此操作将退回申请，请确认是否继续操作？", "退回申请提示", {
						confirmButtonText: "保 存",
						cancelButtonText: "取 消",
						type: "warning",
					})
					.then(() => {
						setBack(id).then((res) => {
							Message({
								message: res.message || "操作成功",
								type: "success",
								duration: 3 * 1000,
							});
							this.listContractRecorde();
						});
					})
					.catch(() => {});
			},

			handleDelete2(id) {
				this.$confirm("此操作将报废，请确认是否继续操作？", "报废提示", {
						confirmButtonText: "保 存",
						cancelButtonText: "取 消",
						type: "warning",
					})
					.then(() => {
						setBaoFei(id).then((res) => {
							Message({
								message: res.message || "操作成功",
								type: "success",
								duration: 3 * 1000,
							});
							this.listContractRecorde();
						});
					})
					.catch(() => {});
			},

			handleDelete3(id) {
				this.$confirm("此操作将登报声明作废，请确认是否继续操作？", "登报声明作废提示", {
						confirmButtonText: "保 存",
						cancelButtonText: "取 消",
						type: "warning",
					})
					.then(() => {
						setBaofeiStatement(id).then((res) => {
							Message({
								message: res.message || "操作成功",
								type: "success",
								duration: 3 * 1000,
							});
							this.listContractRecorde();
						});
					})
					.catch(() => {});
			},
		},
	};
</script>